<template>
  <van-grid class="mineUserData">
    <van-grid-item
      v-for="item of listIcon"
      :key="item.key"
      :text="item.title"
      @click="handleGoitem(item)"
    >
      <template #icon>
        <div style="margin-bottom: 10px">
          <span>{{ data[item.dataKey] }}</span>
          <span class="iconWrapper">
            <van-icon name="arrow" />
          </span>
        </div>
      </template>
    </van-grid-item>
  </van-grid>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/index';
  import { apiGetDriverMineData, apiGetDispatchMineData } from '@/api/home';
  import { dataArr } from '../../data';

  const router = useRouter();
  const { userType, driver_id } = useUserStore();

  const data = ref<any>({});

  const listIcon = ref<any>(dataArr[userType] || []);

  const getData = () => {
    if (userType === 'driver') {
      apiGetDriverMineData({
        driver_id,
      }).then((res) => {
        data.value = res.data;
      });
    }

    if (userType === 'dispatch') {
      apiGetDispatchMineData().then((res) => {
        data.value = res.data;
      });
    }
  };

  onMounted(() => {
    getData();
  });

  const handleGoitem = (item: any) => {
    router.push(item.name);
  };
</script>

<style lang="less" scoped>
  .mineUserData {
    .iconWrapper {
      font-size: 12px;
      color: #aaa;
    }
  }
</style>
